body {
display: grid;
place-items: center;
height: 100vh;
background: #121314;
margin: 0;
padding: 0;
}
.hamburger {
position: absolute;
width: 80px;
cursor: pointer;
}
span {
display: block;
width: 100%;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
border-radius: 3px;
height: 8px;
background: #fff;
transition: all .3s;
position: relative;
}
span+span {
margin-top: 14px;
}
.active span:nth-child(1) {
animation: ease .7s topBar forwards;
}
.not-active span:nth-child(1) {
animation: ease .7s topBarRotate forwards;
}
.active span:nth-child(2) {
animation: ease .7s middleBar forwards;
}
.not-active span:nth-child(2) {
animation: ease .7s middleBarScale forwards;
}
.active span:nth-child(3) {
animation: ease .7s bottomBar forwards;
}
.not-active span:nth-child(3) {
animation: ease .7s bottomBarRotate forwards;
}
@keyframes topBar {
0% {
top: 0;
transform: rotate(0);
}
50% {
top: 22px;
transform: rotate(0);
}
100% {
top: 22px;
transform: rotate(45deg);
}
}
@keyframes topBarRotate {
0% {
top: 22px;
transform: rotate(45deg);
}
50% {
top: 22px;
transform: rotate(0deg);
}
100% {
top: 0;
transform: rotate(0deg);
}
}
@keyframes bottomBar {
0% {
bottom: 0;
transform: rotate(0);
}
50% {
bottom: 22px;
transform: rotate(0);
}
100% {
bottom: 22px;
transform: rotate(135deg);
}
}
@keyframes bottomBarRotate {
0% {
bottom: 22px;
transform: rotate(135deg);
}
50% {
bottom: 22px;
transform: rotate(0);
}
100% {
bottom: 0;
transform: rotate(0);
}
}
@keyframes middleBar {
50% {
transform: scale(0);
}
100% {
transform: scale(0);
}
}
@keyframes middleBarScale {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}